<template>
  <div class="proportion-data">
    <div class="data-head">
      <div class="data-name">得分占比分布</div>
    </div>
    <div class="data-con" v-if="dataList.length">
      <div class="con-head" v-for="(item, index) in dataList.slice(0, 1)" :key="index">
        <div class="head_1">#</div>
        <div class="head_2">{{ item.row1 }}</div>
        <div class="head_2" v-if="item.row2">{{ item.row2 }}</div>
        <div class="head_2" v-if="item.row3">{{ item.row3 }}</div>
        <div class="head_2" v-if="item.row4">{{ item.row4 }}</div>
      </div>
      <div class="con-body">
        <div class="body_li" v-for="(item, index) in dataList.slice(1)" :key="index" :class="{ attention: index > 2 }">
          <div class="li_box" :class="{ attention_box: index > 2 }">
            <div class="li_1">{{ index + 1 }}</div>
            <div class="li_2">{{ item.row1 }}</div>
            <div class="li_2" :class="{ last_li: item.row2 && !item.row3 }" v-if="item.row2">{{ item.row2 }}%</div>
            <div class="li_2" :class="{ last_li: item.row3 && !item.row4 }" v-if="item.row3">{{ item.row3 }}%</div>
            <div class="li_2" :class="{ last_li: item.row4 }" v-if="item.row4">{{ item.row4 }}%</div>
            <span></span>
          </div>
        </div>
        <!-- <div class="word">{{ sourceList.scoreRateSuggest }}</div> -->
      </div>
    </div>
    <div class="data-con" v-else>
      <empty></empty>
    </div>
  </div>
</template>

<script>
import {} from '@apis/api-intelligent.js'
export default {
  name: 'ProportionData',
  components: {},
  props: {
    sourceList: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dataList: [],
    }
  },
  computed: {},
  watch: {
    sourceList: {
      handler(news) {
        if (news) {
          this.dealData(news)
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    dealData(data) {
      console.log('object :>> ', data.scoreRateMap)
      if (data.scoreRateMap) {
        const list = [
          { row1: '得分分段', row2: '', row3: '', row4: '' },
          { row1: '100分以上', row2: '', row3: '', row4: '' },
          { row1: '95-100分(含)', row2: '', row3: '', row4: '' },
          { row1: '90-95分(含)', row2: '', row3: '', row4: '' },
          { row1: '85-90分(含)', row2: '', row3: '', row4: '' },
          { row1: '85分(含)以下', row2: '', row3: '', row4: '' },
        ]
        for (const key in data.scoreRateMap) {
          if (key === '100分以上') {
            data.scoreRateMap[key].slice(0, 3).forEach((item, index) => {
              this.$set(list[0], `row${index + 2}`, item.name)
              this.$set(list[1], `row${index + 2}`, String(item.scoreRate))
            })
          } else if (key === '95-100分(含)') {
            data.scoreRateMap[key].slice(0, 3).forEach((item, index) => {
              this.$set(list[0], `row${index + 2}`, item.name)
              this.$set(list[2], `row${index + 2}`, String(item.scoreRate))
            })
          } else if (key === '90-95分(含)') {
            data.scoreRateMap[key].slice(0, 3).forEach((item, index) => {
              this.$set(list[0], `row${index + 2}`, item.name)
              this.$set(list[3], `row${index + 2}`, String(item.scoreRate))
            })
          } else if (key === '85-90分(含)') {
            data.scoreRateMap[key].slice(0, 3).forEach((item, index) => {
              this.$set(list[0], `row${index + 2}`, item.name)
              this.$set(list[4], `row${index + 2}`, String(item.scoreRate))
            })
          } else if (key === '85分(含)以下') {
            data.scoreRateMap[key].slice(0, 3).forEach((item, index) => {
              this.$set(list[0], `row${index + 2}`, item.name)
              this.$set(list[5], `row${index + 2}`, String(item.scoreRate))
            })
          }
        }
        this.dataList = list
      } else {
        this.dataList = []
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.proportion-data {
  .data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .data-name {
      color: #56585e;
      font-weight: bold;
      font-size: 16px;
    }
  }

  .data-con {
    .con-head {
      display: flex;
      align-items: center;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin-top: 10px;
      margin-left: 8px;

      .head_1 {
        width: 8%;
      }

      .head_2 {
        // width: 23%;
        flex: 1;
      }
    }

    .con-body {
      .body_li {
        height: 38px;
        line-height: 38px;
        background-color: #f8f9fa;
        margin-bottom: 6px;
        border: 1px solid transparent;

        .li_box {
          display: flex;
          align-items: center;
          text-align: center;
          margin-left: 8px;
          position: relative;
          border: 1px solid transparent;

          span {
            position: absolute;
            height: 38px;
            left: -8px;
            top: -1px;
          }

          .li_1 {
            width: 8%;
          }

          .li_2 {
            // width: 23%;
            flex: 1;
          }

          .last_li {
            color: #5971e7;
          }
        }

        .attention_box {
          border: 1px solid #9cc0fd;
          background-color: #f8f9fa;

          span {
            border-right: 3px solid rgb(29, 111, 255);
          }
        }
      }

      .attention {
        background-color: transparent;
        border: none;
      }

      .word {
        margin-top: 10px;
        color: #111111;
        font-size: 14px;
      }
    }
  }
}
</style>
